<!--  -->
<template>
  <div class="categray">
    <div class="top_nav_box" >
        <!-- <van-icon class="left_box" name="arrow-left" /> -->
        <div class="header-search">
            <i class="nbicon nbSearch"></i>
            <router-link tag="span" class="search-title" to="./search?from=categroy">搜索</router-link>
            <!-- <router-link tag="span" class="search-title" to="./product-list?from=category">全场50元起步</router-link> -->
          </div>
</div>
<div ref="searchWrap" class="search-wrap"> 
    <list-scroll :scrolll-data="categoryData" class="nav-side-wraper">
        <ul class="nav-side">
            <li
               v-for="item in categoryData"
               :key="item.categoryId" 
               :class="{'active':currentIndex == item.categoryId}"
               @click="selectMenu(item.categoryId)"
            >{{item.categoryName}}</li>
        </ul>
    </list-scroll>
    <div class="search-content">
        <list-scroll :scroll-data="categoryData">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <template v-for="(categroy,index) in categoryData" >
                        <div class="swiper-slide" v-if="currentIndex == categroy.categoryId" :key="categroy.categoryId" >
                            <div class="category-list" v-for="(product,index) in categroy.secondLevelCategoryVOS" :key="index">
                                <div class="catogory-title"> {{product.categoryName}}</div>
                                <div class="product-item" v-for="(product,index) in product.thirdLevelCategoryVOS" :key="index" @click="selectProduct(product)">
                                    <img src="../assets/logo.png" class="product-img"/>
                                    <p v-text="product.categoryName" class="product-title"></p>
                                </div>
                            </div>
                        </div>
                    </template>
</div>
</div>
</list-scroll>
</div>
</div>
</div>
</template>

<script>
    import listScroll from '../components/home/ListScroll'
    import {
        getCategory,
    } from "../api";
    export default {
        data() {
            return {
                categoryData: [],
                currentIndex: 15
            };
        },

        components: {
            listScroll
        },

        async mounted() {
            this.setWrapHeight();
            const {
                data
            } = await getCategory();
            this.categoryData = data;
            console.log(data)
        },


        methods: {
            //设置视口宽度
            setWrapHeight() {
                let $screenHeight = document.documentElement.clientHeight;
                this.$refs.searchWrap.style.height = $screenHeight - 100 + 'px';
            },
            selectMenu(index) {
                this.currentIndex = index;
                console.log(index)
            },
            selectProduct(item) {
                this.$router.push({
                    path: `search?categoryId=${item.categoryId}`
                })
            },

        }
    }
</script>
<style lang='less' scoped>
    .categray {
        .top_nav_box {
            display: flex;
            width: 100%;
            height: 50px;
            align-items: center;
            .left_box {
                width: 10%;
                background: transparent;
            }
            .header-search {
                width: 90%;
                text-align: center;
            }
        }
        .search-wrap {
            width: 100%;
            background: #f8f8f8;
            display: flex;
            justify-content: space-between;
            .nav-side-wraper {
                width: 28%;
                font-size: 14px;
                height: 100%;
                overflow: hidden;
                .nav-side {
                    width: 100%;
                    li {
                        width: 100%;
                        height: 56px;
                        line-height: 56px;
                        text-align: center;
                        &.active {
                            /* color: @primary; */
                            background: #fff;
                        }
                    }
                }
            }
            .search-content {
                width: 72%;
                height: 100%;
                padding: 0 10px;
                background: #fff;
                .swiper-container {
                    width: 100%;
                    .swiper-slide {
                        width: 100%;
                        overflow-y: auto;
                        .category-main-img {
                            width: 100%;
                        }
                        .category-list {
                            display: flex;
                            flex-wrap: wrap;
                            flex-shrink: 0;
                            width: 100%;
                            .catogory-title {
                                width: 100%;
                                font-size: 17px;
                                font-weight: 500;
                                padding: 20px 0;
                            }
                            .product-item {
                                width: 33.3333%;
                                margin-bottom: 10px;
                                text-align: center;
                                font-size: 15px;
                                .product-img {
                                    width: 30px;
                                    height: 30px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>